@import '@/lib/reset.scss';
a {
    text-decoration: none!important;
}
html,body,#root{
    width:100%;
    height:1400px;
    margin:0;
    padding:0;

    .userCenter{
        width:708px;
        height:auto;
        float: left;
        .postsCentent{
            width:708px;
            height:auto;
            background:#fff;
            margin-bottom:7px;
            h1{
                width:708px;
                height:51px;
                font-size:14px;
                line-height: 51px;
                font-weight: 600;
                padding-left:30px;
                border-bottom:1px solid #ccc;
            }
            .posts{
                width:708px;
                height:198px;
                text-align: center;
                line-height: 198px;
                color: #b2bac2;
            }
        }
        .booksCentent{
            width:708px;
            height:auto;
            background:#fff;
            margin-bottom:7px;
            h1{
                width:708px;
                height:51px;
                font-size:14px;
                line-height: 51px;
                font-weight: 600;
                padding-left:30px;
                border-bottom:1px solid #ccc;
            }
            .books{
                width:708px;
                height:198px;
                text-align: center;
                line-height: 198px;
                color: #b2bac2;
                
            }
        }
        .pinsCentent{
            width:708px;
            height:auto;
            background:#fff;
            margin-bottom:7px;
            h1{
                width:708px;
                height:51px;
                font-size:14px;
                line-height: 51px;
                font-weight: 600;
                padding-left:30px;
                border-bottom:1px solid #ccc;
            }
            .header{
                width:708px;
                height:64px;
                .left{
                    float: left;
                    width:258px;
                    height:48px;
                    margin:16px 0 0 20px;
                    position: relative;
                        .left-Img{
                            width:45px;
                            height:45px;
                            background: #000;
                            border-radius: 50%;
                            float: left;
                            img{
                                width:45px;
                                height:45px;
                                border-radius: 50%;
                            }
                        }
                        
                        .left-Title{
                            width:150px;
                            height:20px;
                            line-height: 24px;
                            font-weight: 600;
                            margin-left:12px;
                            float: left;
                            color:rgb(26, 26, 26);
                            font-size:16px;
                        }
                        .left-xinxi{
                            margin-left:12px;
                            float: left;
                            line-height: 29px;
                            height:20px;
                            color: #8a9aa9;
                        }
                        .topicInfo{
                            width:267px;
                            height:158px;
                            background: #fff;
                            border:1px solid #ccc;
                            position: absolute;
                            top :55px;
                            left:-120px;
                            z-index: 1;
                            display: none;
                            .Info-header{
                                width:265px;
                                height:70px;
                                margin-top:12px;
                                .Info-left{
                                    width:63px;
                                    height:63px;
                                    border-radius: 50%;
                                    float: left;
                                    background: #000;
                                    margin: 3px 0 0 20px;
                                    img{
                                        width:63px;
                                        height:63px;
                                        border-radius: 50%;
                                    }
                                }
                                .Info-right{
                                    width:170px;
                                    height:70px;
                                    float: right;
                                    span{
                                        width:150px;
                                        height:25px;
                                        display: block;
                                        font-size:13px;
                                        line-height:25px;
                                        // text-align: center;
                                        margin:6px 0;
                                        color:#0e0e0e;
                                    }
                                    em{
                                        width:150px;
                                        height:25px;
                                        display: block;
                                        overflow: hidden;
                                        text-overflow:ellipsis;
                                        white-space:nowrap;
                                        margin-top:8px;
                                    }
                                }
                            }
                            .Info-footer{
                                width:266px;
                                height:74px;
                                .Info-one{
                                    width:50px;
                                    height:45px;
                                    float: left;
                                    margin:15px 25px 0 5px;
                                    text-align: center;
                                    b{
                                        width:50px;
                                        font-size: 16px;
                                        display: inline-block;
                                    }
                                    i{
                                        height:22px;
                                        font-size: 12px;
                                        line-height: 20px;
                                        color:#8a9aa9;
                                    }
                                }
                                .Info-two{
                                    width:50px;
                                    height:45px;
                                    float: left;
                                    margin:15px 45px 0 0;
                                    text-align: center;
                                    b{
                                        width:50px;
                                        font-size: 16px;
                                        display: inline-block;
                                    }
                                    i{
                                        height:22px;
                                        font-size: 12px;
                                        line-height: 20px;
                                        color:#8a9aa9;
                                    }
                                }
                                .Info-there{
                                    width:55px;
                                    height:26px;
                                    text-align: center;
                                    line-height: 26px;
                                    border-radius: 2px;
                                    display:block;
                                    border:1px solid #37c701;
                                    margin:30px 0 0 10px;
                                    float: left;
                                    a{
                                        color:#37c701;
                                        font-size:12px;
                                    }
                                
                                }
                            }
                        }
                        &:hover{
                        .topicInfo{
                            display: block;
                        }
                    }
                }
                .right{
                    float: right;
                    
                    span{
                        display: block;
                        width:55px;
                        height:26px;
                        border:1px solid #37c701;
                        text-align: center;
                        color:#37c701;
                        margin:23px 20px 0 0;
                        border-radius: 3px;
                        line-height: 26px;
                    }
                }
            }
            .content{
                width:507px;
                height:auto;
                font-size: 15px;
                line-height: 40px;
                position: relative;
                margin: 0 20px 7px 77px;
                color: #17181a;
                
            }
            .images{
                width:514px;
                height:auto;
                position: relative;
                margin: 4px 20px 0 77px;
                img{
                    width:110px;
                    height:110px;
                    margin:4px 4px 0 0;
                }
            }
            p{
                height:24px;
                position: relative;
                margin: 10px 20px 0 77px;
                a{
                    font-size: 13px;
                    display: inline-block;
                    line-height: 22px;
                    padding: 0 12px;
                    border: 1px solid #007fff;
                    border-radius: 14px;
                    color: #007fff;
                    user-select: none;
                }
            }
            .footer{
                width:640px;
                height:28px;
                display: flex;
                position: relative;
                margin-top:12px;
                border-top: 1px solid #ebebeb;
                span{
                    display: block;
                    width:236px;
                    height:auto;
                    margin:5px 0;
                    border-right:1px solid #ebebeb;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    b{
                        display: block;
                        width:18px;
                        height:18px;
                        img{
                            width:16px;
                            height:16px;
                        }
                    }
                    em{
                        display: block;
                        margin:3px 0 0 3px;
                        font-size: 13px;
                        font-weight: 500;
                        color: #8a93a0;
                    }
                }
            }
        }
        .sharesCentent{
            width:708px;
            height:auto;
            background:#fff;
            margin-bottom:7px;
            h1{
                width:708px;
                height:51px;
                font-size:14px;
                line-height: 51px;
                font-weight: 600;
                padding-left:30px;
                border-bottom:1px solid #ccc;
            }

            .entry-list  {
                width: 700px;
                height:auto;
                .content-box {
                    width: 700px;
                    height: auto;
                    .info-box {
                        padding: 18px 24px;
                        @include rect(700px, 116px);
                        border-bottom: 1px solid hsla(0,0%,59.2%,.1);
                        margin: 0;
                        .info-box-row {
                            @include rect(652px, 16px);
                            ul {
                                li {
                                    float: left;
                                    font-size: 12px;
                                }
                                li:first-child {
                                    font-weight: 500;
                                    color: #909090;
                                    height: 16px;
                                    i {
                                        line-height: 16px;
                                        font-size: 9px;
                                    }
                                }
                                li:nth-child(2),li:nth-child(3),li:nth-child(4) {
                                    font-weight: 500;
                                    color: #909090;
                                    height: 16px;
                                    i {
                                        line-height: 16px;
                                        font-size: 9px;
                                    }
                                }
                                li:hover{
                                    color:#007fff;
                                }
                            }
                        }
                        .info-box-title {
                            font-size: 17px;
                            font-weight: 600;
                            line-height: 1.2;
                            color: #2e3135;
                            margin: 5px 0 10px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .info-box-title:hover{
                            text-decoration: underline;
                        }
                        .info-box-operation {
                            @include rect(193.5px, 26px);
                            ul {
                                li {
                                    border: 1px solid #eee;
                                    padding: 0 9.6px;
                                    float: left;
                                    color: #909090;
                                    i {
                                        font-size: 16px;
                                    }
                                    span {
                                        margin-left: 2.6px;
                                    }
                                }
                                li:nth-child(2) {
                                    border-left: 0;
                                }
                                .fenxiang {
                                    margin-left: 9.6px;
                                    border-right:0;
                                    display:none;
                                }
                                .shoucang {
                                    display:none;
                                }
                            }
                        }
                    }
                    .info-box:hover {
                        .info-box-operation {
                            ul {
                                .fenxiang,.shoucang {
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }


        }


        
    }
} 